NextJS로 블로그 이전

ordilov / 2022. 3. 10

아마 오랫동안 사용할 블로그로 NextJs를 사용하기로 정하면서 그 동안의 변화를 정리했습니다.

처음에 블로그로 공부한 걸 남겨야겠다고 했을 때 문저 성택했던 건 티스토리였습니다. 따로 관리도 가능하고 여러모로 편리한 점이 많지만 불편한 점이 몇 가지 있었습니다.

• 파일로 한 번에 관리하기 어렵습니다.
• 에디터가 마크다운으로 작성할 때 불편한 점들이 있습니다.
• 마크다운 형식을 다른데로 옮기면 형식이 변형되서 깨집니다.

따라서 옮겼던 게 jekyll로 github pages에 배포한 방법이었습니다. github에서 공식적인 문서가 있을 정도로 지원이 되다보니 설명도 잘되어있고 테마나 커스텀도 가능했습니다. 기록을 커밋으로 남길 수 있다는 것도 장점이었습니다. 하지만 jekyll이기 때문에 불편한 점들이 있었습니다.

• ruby를 잘 쓰지 않아서 필요한 기능을 추가할 때 시간이 오래 걸렸습니다.
• 목록 수정이나 메타 정보를 불러올 때 jekyll 문법을 일일이 찾아봐야 했습니다.
• 설정을 잘못했는지 빌드 속도가 다른 것들에 비해 느렸습니다.

그러다 보니 옮겨야겠다고 생각만 하고 미루다가 NextJS 기반을 쓸 일이 생기면서 옮기게 되었습니다. 정적 사이트 프레임워크 중 여러 선택지 중 NextJS를 선택한 데도 이유가 있었습니다.

• 참고할 자료가 많은 프레임워크를 선택하고 싶었습니다.
• 프로젝트 용으로 연습하고 있던 프론트도 NextJS 였기에 사용해보려 했습니다.

결과적으로 아직도 바꿀 부분이 많지만 어느정도 옮길 수 있었고 배운 점들이 있었습니다.

프론트에 대해 잘 모르지만 언뜻 알고 있던 정적 사이트 배포 방법은 세 가지 였습니다. github pages, vercel, netlify 인데 간단하게 써봤을 때 추천드리는 건 vercel이나 netlify입니다. 필요한 건 깃허브 연동만 하면 깃 커밋만 하면 연동해서 쉽게 가능했습니다.

github pages는 github action을 사용해봤고 다른 서드파티를 쓰기 싫은 분들에게 추천드립니다. 깃에 올리기 전에 배포 환경에서 잘 될지 다음 명령어로 확인해보는 것이 좋습니다.

next build && next export

명령어로 정적 파일을 생성하는데 이 과정에서 에러가 발생할지 확인할 수 있습니다.

jekyll에서 kramdown이 그렇듯 마크다운 블로그를 이용하려면 마크다운을 html으로 바꿔줄 라이브러리가 필요합니다. nextJs에서 markdown을 읽어올 수 있는 라이브러리가 많지만 그 중에서 mdx 를 이용했습니다. 사용한 가장 큰 이유는 nextJs 공식 페이지에서 소개와 라이브러이 지원이 되어서 였습니다. 하지만 옮기면서 어려웠던 점들이 있습니다.

• 기존의 jekyll에서 특수하게 사용했던 플러그인 문법이 호환되지 않는 점
• jekyll에서 고정 front matter들을 필요에 맞게 수정이 필요한 점

그래도 옮기면서 좋았던 점은 jekyll에서 파일 이름 형식이 날짜-제목으로 고정해야했는데 자유롭게 바뀐 점입니다.

백엔드 공부도 부족하다고 생각해서 프론트 작업은 피하거나 어려워했는데, 답답하기도 했지만 많이 배웠습니다. 특히 블로그에서 당연하다고 생각했던 기능들이 당연한 게 아니구나 하면서 다른 사이트들을 보는 눈이 달라졌습니다.